<template>
	<view >
		<upBelow v-on:pulldown="pulldown" v-on:reachbottom="reachbottom">
        <!-- 自定义刷新动画 -->
        <view class="pulldown-loadng" slot="pulldown">
          <view class="loading-icon-text">
            <image class="loadingImg"  :src=`${getApp().globalData.onImgurl}up-Below/refresh.png` alt="刷新logo"></image>
            喜欢请5评，谢谢...
          </view>
        </view>
        <!-- 需要展示的内容 -->
        <view slot="content">
          <view v-for="t in 50">
            请下拉刷新或者上拉加载：查看打印{{t}}
          </view>
        </view>
        <!-- 预留空位 （可选）-->
        <view slot="empty" style="height: 100rpx;"></view>
		</upBelow>
	</view>
</template>

<script>
  import upBelow from "@/components/up-Below/up-Below.vue"
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {
      pulldown(e){
        let {stop}=e;
        console.log("触发下拉刷新");
        setTimeout(()=>{console.log("刷新成功");stop();},1000)
      },
      reachbottom(e){
        let {stop}=e;
        console.log("触发上拉加载");
        setTimeout(()=>{console.log("加载成功");stop();},1000)
      }
		},
    components:{upBelow}
	}
</script>

<style>
  /* 刷新动画 */
  .pulldown-loadng {
    display: flex;
    align-items: center;
    justify-content: center;
    background:#efefef;
  }
  .loading-icon-text{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #D61313;
    width: 100%;
    font-weight: bold;
    height: 150rpx;
  }
  .loading-icon-text image{
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
  }
  
  @keyframes loadingImg{
    0%{
      transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
  .loadingImg{
    animation: loadingImg .8s linear infinite;
  }
</style>
